<template>
  <div class="sidebarCheck" style="height:100%;overflow:hidden;">
    <div :style="{height: setHeight}"></div>
    <a-tabs type="card" size="small">
      <a-tab-pane tab="区域列表" key="1">
        <div style="position: relative;">
          <div :style="heightTree" style="overflow:auto">
            <div style="padding: 0 10px;">
              <!--@select="onSelect"-->
              <a-tree
                :show-line="showLine"
                :show-icon="showIcon"
                :size="'small'"
                :treeData="menuTree"
                :checkable="checkable"
                @check="onCheck"
                :checkStrictly="false"
                :checkedKeys="checked"
                :selectedKeys="selected"
                :expandedKeys="iExpandedKeys"
                :autoExpandParent="autoExpandParent"
                v-model="checkedKeys"
                @expand="onExpand"
              >
                <template slot="title" slot-scope="{title}">
                  <span v-if="title.indexOf(searchValue) > -1">
                    {{title.substr(0, title.indexOf(searchValue))}}
                    <span style="color: #f50">{{searchValue}}</span>
                    {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
                  </span>
                  <span v-else>{{title}}</span>
                </template>

              </a-tree>
            </div>
          </div>



        </div>
      </a-tab-pane>

    </a-tabs>
  </div>
</template>
<script>
import menu from "@/api/accessControlSystem/menu";

export default {
  props: {
    // menuSelected: Array,
    heightTree: "",
    checkable:Boolean,
    setHeight: {
      type: String,
      default: "4px"
    },
    //菜单树初始化选择
    checkedKeys: {
      type: Array,
      default: []
    },
    type: {
      type: Number,
      default: 1
    },

  },
  components: {

  },
  data() {
    return {
      showLine: false,
      showIcon: false,
      replaceFields: {
        key: 'id',
        title: 'name',
        value: 'name',
        children: 'areaList',
      },
      autoExpandParent: true, //是否自动展开父节点
      checked: [],
      selected: [],
      menuTree: [],
      iExpandedKeys: [],
      searchValue: {},
    };
  },
  mounted() {
    // console.log(this.type)
    if (this.type == 1) {
      this.getTreeList();
    }
  },
  computed: {
    // menuSelectedComputed: {
    //   get: function() {
    //     return this.menuSelected;
    //   },
    //   set: function(value) {
    //     this.$emit("update:menuSelected", value);
    //     this.$emit("on-select", value);
    //   }
    // },
    // menuCheckedComputed: {
    //   get: function() {
    //     return this.menuChecked;
    //   },
    //   set: function(value) {
    //     this.$emit("update:menuChecked", value);
    //     this.$emit("on-check", value);
    //   }
    // },

  },
  methods: {
    getTreeList(){
      let _this = this;
      // 初始化场所树
      // console.log("111111")
      menu.getTreeList().then(res => {
        // console.log(res);
        if (res.data.success) {
          _this.menuTree = res.data.result;
          // console.log( _this.menuTree );
          if (_this.menuTree != "") {
            _this.iExpandedKeys = [_this.menuTree[0].key];
          }
        } else {
          _this.$message.error(res.data.message);
        }
      });
    },
    // 查询场所
    searchMenu(value) {
      // console.log(value);
      this.onSearch(value);
    },

    // 重置树
    setMenuTree(tree,areaIds) {
      // console.log(tree);
      // console.log(areaIds);
      this.menuTree = [];
      this.menuTree = tree;
      this.iExpandedKeys = [this.menuTree[0].key];
      this.checkedKeys = areaIds;
    },
    //树形选中
    onCheck(checked) {
      //this.checked = checked 交给父元素去修改数据
      this.$emit("update:checked", checked);
      this.$emit("on-check", checked);
      this.checked = checked;
      this.selected = [];
    },
    // 树形选择
    onSelect(selectedKeys, info) {
      this.$emit("update:selected", selectedKeys);
      this.$emit("on-select", selectedKeys);
      this.$emit("on-select-info", info);
      this.selected = selectedKeys;
      this.checked = [];
    },
    async onSearch(value) {
      let that = this;
      //根据value过滤树节点符合搜索值得节点，返回相应id数组，赋值给iExpandedKeys
      //这个是场所树得API
      let keys = await menu.searchDeptByKey({ key: value });

      if (keys.success) {
        that.iExpandedKeys = keys.result;
        that.searchValue = value;
      }
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys;
      this.autoExpandParent = false;
    }

  }
};
//
</script>

<style scoped>
/*布局*/
.ant-tabs-bar {
  margin: 0 0 10px 0;
}
</style>
